<template>
    <div class="bask-page">
        <div class="top">
            <div @click="$router.go(-1)" class="left">
                <img src="../assets/images/back_b_icon.png" alt="">
            </div>
            <div class="md">菜篮子({{num}})</div>
            <div class="right" @click="clear">清空</div>
        </div>
        <div class="content">
            <!-- <div class="nav">
                <div class="nav-left active">按菜品查看</div>
                <div class="nav-right">按材料查看</div>
            </div> -->
            <div class="emty" v-if="!checkCon">
                <h4>经常买完菜回家，才发现忘了买葱？</h4>
                <span>(就把菜谱中的原料放进菜篮子里，买菜时就不会漏掉原料了)</span>
            </div>
            <div class="lists" v-if="checkCon">
                <div class="lists-con" v-if="basketLists">
                    <div class="lists-item" v-for="(item,index) in basketLists" :key="index">
                        <div class="veg-info">
                            <div class="vg-left">
                                <div class="img" v-if="item.id.length<=10" :style="{'background-image':'url(https://pic.ecook.cn/web/'+item.imageid+'.jpg!wl280)'}"></div>
                                <div class="img" v-else :style="{'background-image':'url(blob:http://localhost:8080/'+item.imageid+')'}"></div>
                                <span>{{item.name}}</span>
                            </div>
                            <div class="vg-right" @click="remove(item.id)">移出这个菜</div>
                        </div>
                        <div class="basket-lists">
                            <div :class="['bl-item',{'checked':k.cookbookName},{'none':k.name==''}]" v-for="(k,index) in item.materialList" :key="k.id" @click="checked(item.id,index,k.id)">
                                <div class="bl-left">
                                    <img src="../assets/images/对勾.png" alt="" v-if="k.cookbookName">
                                    <span>{{k.name}}</span>
                                </div>
                                <div class="left">
                                    <span>{{k.dosage}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                checkCon: false,
                basketLists:null,
                basketId:null,
                caipuinfo:null,
                NumLists:[],
                checkremove:true,
                templists:[],
                indexlists:[],
                checkNum:null,
                userid:null,
            };
        },
        methods: {
            getNeedsFun(){
                if (this.basketLists!=null) {
                    this.basketLists.forEach(item=>{                   
                    item.materialList.forEach(i=>{
                        i.cookbookName=false
                        if (i.name!='') {
                            this.NumLists.push(i)
                        }
                    })
                })
                }
                window.localStorage.setItem("lzLists",JSON.stringify(this.basketLists))
            },
            //移除某一项
            remove(id){
                window.localStorage.removeItem("indexlists")
                let index = this.basketLists.findIndex(item=>item.id==id)
                this.templists = [...this.templists,this.basketLists[index]]
                window.localStorage.setItem("basket",JSON.stringify(this.templists))
                this.basketLists.splice(index,1)
                window.localStorage.setItem("lzLists",JSON.stringify(this.basketLists))
                this.NumLists=[]
                this.getNeedsFun()
            },
            //选中对应的食材
            checked(id,i,l){
                 if (this.basketLists!=null) {
                    let index = this.basketLists.findIndex(item=>item.id==id)
                    this.basketLists[index].materialList[i].cookbookName=!this.basketLists[index].materialList[i].cookbookName
                 if (this.basketLists[index].materialList[i].cookbookName) { 
                    this.indexlists = [...this.indexlists,l]
                 }else{
                    let d = this.indexlists.findIndex(item=>item==l)
                    this.indexlists.splice(d,1)
                 }
                }
                window.localStorage.setItem("indexlists",JSON.stringify(this.indexlists))
            },
            //清空菜篮子
            clear(){
                this.checkCon = false
                this.checkremove = false
                window.localStorage.removeItem("lzLists")
                window.localStorage.removeItem("indexlists")
            }
        },
        computed:{
            //计算所有食材
            num(){
                if (this.basketLists!=null) {
                     return this.NumLists.reduce((count, item) => (item.cookbookName ? count : ++count), 0)
                }else{
                    return 0
                }
            }
        },
        created() {
          this.userid = window.localStorage.getItem("userId")
          let temp = JSON.parse(window.localStorage.getItem("lzLists"))
          let tempindex = JSON.parse(window.localStorage.getItem("indexlists"))
          //给indexlists重新赋值
          this.indexlists = tempindex==null?[]:tempindex
          if (temp!=null) {
            this.basketLists = temp
            this.getNeedsFun()
            this.checkCon = true
            this.checkremove = true
          }else{
            this.basketLists=null
          }
       
          if (tempindex!=null) {
                tempindex.forEach(item=>{
                    let index = this.NumLists.findIndex(c=>c.id==item)
                    this.NumLists[index].cookbookName = true
                })
          }
        },
        watch:{
            "basketLists":function () {
                if (this.basketLists.length==0) {
                    this.checkCon = false
                }
            },
            'checkremove':function () {
               this.basketLists=null
            }
        }
    }
</script>

<style lang="less" scoped>
.bask-page{
    height: 100%;
    .top{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left{
            width: 30px;
            margin-left: 10px;
            &>img{
                width: 12px;
                height: 20px;
            }
        }
        .md{
            font-size: 15px;
            font-weight: bold;
            letter-spacing: 0.8px;
        }
        .right{
            font-size: 15px;
            color: #ffc000;
            font-weight: bold;
            margin-right: 10px;
        }
    }
    .content{
        height: 100%;
        overflow-y: scroll;
        .nav{
            position: sticky;
            top: -1px;
            height: 25px;
            z-index: 99;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            background-color: #fff;

            .nav-left,
            .nav-right{
                width: 100px;
                height: 100%;
                text-align: center;
                font-size: 14px;
                letter-spacing: 0.8px;
                position: relative;
            }
            .active{
                color: #ffc000;

                &::after{
                    content:'';
                    width: 75px;
                    height: 3px;
                    background-color: #ffc000;
                    position: absolute;
                    bottom: 0px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }
            }
        }
        .emty{
            width: 100%;
            height: 500px;
            padding: 0 35px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            &>h4{
                font-size: 16px;
                font-weight: bold;
                margin: 10px 0;
            }
            &>span{
                font-size: 13px;
                line-height: 22px;
                text-align: center;
            }
        }
        .lists{
            padding-top: 20px;
            padding-bottom: 50px;
            .lists-con{
             padding: 0 15px;
                .lists-item{
                    margin-bottom: 20px;
                    .veg-info{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                       .vg-left{
                            display: flex;
                            align-items: center;
                            .img{
                                 width: 60px;
                                 height: 60px;
                                 background-repeat: no-repeat;
                                 background-position: center;
                                 background-size: cover;
                                 border-radius: 4px;
                                 overflow: hidden;
                                 margin-right: 10px;
                                }
                            &>span{
                                font-size: 14px;
                                font-weight: bold;
                                letter-spacing: 0.8px;
                            }
                       }
                       .vg-right{
                        font-size: 14px;
                        color: #ffc000;
                        font-weight: bold;
                        letter-spacing: 0.8px;
                       }
                    }
                    .basket-lists{
                        margin-top: 15px;
                        .bl-item{
                            height: 30px;
                            padding: 5px 8px;
                            margin-bottom: 10px;
                            border-radius: 4px;
                            background-color: #f2f2f2;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .bl-left{
                                display: flex;
                                align-items: center;
                                &>img{
                                    width: 25px;
                                }
                                &>span{
                                    font-size: 14px;
                                    font-weight: bold;
                                    letter-spacing: 0.8px;
                                }
                            }
                            .bl-right{
                                &>span{
                                    font-size: 14px;

                                }
                            }
                        }
                        .none {
                            display: none;
                        }
                        .checked{

                            .bl-left{

                                &>span{
                                    font-size: 14px;
                                    font-weight: bold;
                                    color: #999;
                                    letter-spacing: 0.8px;
                                }
                            }
                            .left{
                                &>span{
                                    color: #999;
                                } 

                            }
                        }
                    }   
                }
            }
        }
    }
}
</style>